<!-- 人气推荐 -->
<template>
    <div ref="goodslist">
      <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
        <ul ref="pannel" class="goods-list">
          <li v-for="item in goods" :key="item.id">
            <RouterLink to="/">
              <!-- <img :src="item.picture" alt=""> -->
              <img src="" alt="" v-lazy="item.picture">
              <p class="name">{{item.title}}</p>
              <p class="desc">{{item.alt}}</p>
            </RouterLink>
          </li>
        </ul>
      </HomePanel>
    </div>
</template>
  
  <script>
  import HomePanel from './HomePanel.vue'
  import { getrqtj } from '@/utils/api/homeapi'
  import { lazyload } from '@/utils/constfun'
  export default {
    name: 'HomeNew',
    components: { HomePanel },
    data(){
        return{
            goods:[]
        }
    },
    mounted(){
        // this.getrqtjlist()
        // 导入原生api 来观察我们的dom元素
        lazyload(this.$refs.goodslist,this.getrqtjlist)
    },
    methods:{
        async getrqtjlist(){
            let res=await getrqtj()
            this.goods=res.result
        }
    }
  }
  </script>
  
  <style scoped lang='scss'>
  @import '@/assets/css/variables.scss';
  @import '@/assets/css/mixin.scss';
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 426px;
    li {
      width: 306px;
      height: 406px;
      @include hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding-top: 12px;
        text-align: center;
      }
      .desc {
        color: #999;
        font-size: 18px;
      }
    }
  }
  </style>